import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Spacer from '../../components/Spacer';
import HomeCard from './components/HomeCard';
import { OverviewData } from './types';
import useBasisCash from '../../hooks/useBasisCash';
import config from '../../config';
import Notice from '../../components/Notice';
import TokenSymbol from '../../components/TokenSymbol';
import bg_home from '../../assets/image/bg_home.png';
import img_bolang from '../../assets/image/img_bolang.png';

const Home: React.FC = () => {
  const basisCash = useBasisCash();

  const [{ cash, bond, share }, setStats] = useState<OverviewData>({});
  const fetchStats = useCallback(async () => {
    const [cash, bond, share] = await Promise.all([
      basisCash.getCashStatFromUniswap(),
      basisCash.getBondStat(),
      basisCash.getShareStat(),
    ]);
    if (Date.now() < config.bondLaunchesAt.getTime()) {
      bond.priceInDAI = '-';
    }
    setStats({ cash, bond, share });
  }, [basisCash, setStats]);

  useEffect(() => {
    if (basisCash) {
      fetchStats().catch((err) => console.error(err.stack));
    }
  }, [basisCash]);

  const cashAddr = useMemo(() => basisCash?.ESC.address, [basisCash]);
  const shareAddr = useMemo(() => basisCash?.ESS.address, [basisCash]);
  const bondAddr = useMemo(() => basisCash?.ESB.address, [basisCash]);

  return (
    <Page>
      <StyleDivCont>
        <StyleDiv1>
          <img
            src={bg_home}
            alt='logo'
            width={354}
            height={272}
          />
          <Styleh1>欢迎来到EASYBANK</Styleh1>
          <Stylesubtitle>請在MDEX上為ESC和ESS提供流動性，以及買賣交易。</Stylesubtitle>
        </StyleDiv1>
      </StyleDivCont>
      <DongImgback />

      <Spacer size="md" />
      <CardWrapper>
        <HomeCard
          title="EASY CASH"
          symbol="ESC"
          color="#000000"
          supplyLabel="循環供應量"
          address={cashAddr}
          stat={cash}
        />
        <Spacer size="lg" />
        <HomeCard
          title="EASY SHARE"
          symbol="ESS"
          color="#5A5F69"
          address={shareAddr}
          stat={share}
        />
        <Spacer size="lg" />
        <HomeCard
          title="EASY BOND"
          symbol="ESB"
          color="#5A5F69"
          address={bondAddr}
          stat={bond}
        />
      </CardWrapper>
    </Page>
  );
};

const StyleDivCont = styled.div`
  width: 100%;
  background-image: linear-gradient(#2A169B, #2CD4D9);
`

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 48px;
  padding-top: 48px;
  max-width: 512px;
  width: 100%;
  margin: 0 auto;
`

const Styleh1 = styled.h1`
  color: #f5f5f5;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  margin-top: 40px;
  padding: 0;
  text-align: center;
  @media (max-width: 768px) {
    font-size: 26px;
  }
`;

const Stylesubtitle = styled.p`
color: #ffffff;
font-size: 18px;
font-weight: 400;
margin: 0;
margin-top: 34px;
padding: 0;
text-align: center;
@media (max-width: 768px) {
  font-size: 14px;
}
`

const StyledOverview = styled.div`
  align-items: center;
  display: flex;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const CardWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: 2px;
  }
`;

const StyledNoticeContainer = styled.div`
  max-width: 768px;
  width: 90vw;
`;

const DongImgback= styled.div`
@keyframes wave {
	0% {
		background-position: 0;
	}

	100% {
		background-position: 1920px;
	}
}
    max-width: 102%;
    width: 100%;
    height: 99px;
    left: 0;
    background: url(${img_bolang}) repeat-x;
    background-position: top left;
    animation: wave 10s cubic-bezier(0.34, 0.56, 0.17, 0.37) infinite;
    @media (max-width: 768px) {
      display: none;
    }
`;

const StyledSpacer = styled.div`
  height: ${(props) => props.theme.spacing[4]}px;
  width: ${(props) => props.theme.spacing[4]}px;
`;

const StyledLink = styled.a`
  font-weight: 700;
  text-decoration: none;
  color: ${(props) => props.theme.color.primary.main};
`;

export default Home;
